<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="field">
        <span slot="label">
          字段管理
          <el-badge :value="fields.length" class="item" />
        </span>
        <vxe-button status="primary" v-if="add" @click="addFieldInit">添加虚拟字段</vxe-button>
        &nbsp;&nbsp;Tip:虚拟字段背景为黄色
        <vxe-table
          ref="fieldTable"
          :data="fields"
          :border="true"
          stripe
          show-header-overflow
          :highlight-current-row="true"
          :row-config="{isHover: true}"
          show-overflow
          size="mini"
          :height="tableHeight"
          :edit-config="{ trigger: 'dblclick', mode: 'row' }"
          :row-style="rowStyle"
          style="width: 100%;margin-top:10px"
          @edit-closed="editClosedEvent"
        >
          <vxe-table-column field="order_num" title="排序" width="70" :edit-render="{ name: '$input', props: { type: 'number' } }" />
          <vxe-table-column field="en" show-overflow title="字段名" />
          <vxe-table-column field="cn" show-overflow title="中文名" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="align" show-overflow title="排列" :edit-render="{ name: '$select', options: alignList, optionProps: { value: 'value', label: 'label' } }" />
          <vxe-table-column field="width" show-overflow title="列宽" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="span" show-overflow title="分栏" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="form_label_width" show-overflow title="表单名宽度" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="placeholder" show-overflow title="输入提示" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="type" show-overflow title="控件" :edit-render="{ name: '$select', options: typeList, optionProps: { value: 'value', label: 'label' } }" />
          <vxe-table-column field="type_config" show-overflow title="控件配置" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="formatter" show-overflow title="格式化" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="validator" show-overflow title="表单验证" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="fictitious_sql" show-overflow width="120" title="虚拟字段来源" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="on_change" show-overflow title="字段更改事件" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="is_show" title="显示">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.is_show" active-color="#13ce66" inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="is_query" title="查询">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.is_query" active-color="#13ce66" inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="is_add" title="新增">
            <template slot-scope="scope">
              <el-switch v-if="!scope.row.is_fictitious" v-model="scope.row.is_add" active-color="#13ce66" inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="is_update" title="修改">
            <template slot-scope="scope">
              <el-switch v-if="!scope.row.is_fictitious" v-model="scope.row.is_update" active-color="#13ce66" inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="is_line_update" title="行内修改">
            <template slot-scope="scope">
              <el-switch
                v-if="!scope.row.is_fictitious"
                v-model="scope.row.is_line_update"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchFieldChange(scope.row)"
              />
            </template>
          </vxe-table-column>
          <vxe-table-column field="update_validate" show-overflow width="120" title="行内修改权限" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="is_order" title="排序">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.is_order" active-color="#13ce66" inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="80">
            <template slot-scope="scope">
              <el-button size="small" type="danger" icon="el-icon-delete" @click="delField(scope.row)" />
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane name="button">
        <span slot="label">
          按钮管理
          <el-badge :value="buttons.length" class="item" />
        </span>
        <vxe-button status="primary" v-if="add" @click="addButtonInit">添加按钮</vxe-button>
        <vxe-table
          ref="buttonTable"
          :data="buttons"
          :border="true"
          stripe
          show-header-overflow
          show-overflow
          size="mini"
          :height="tableHeight"
          :edit-config="{ trigger: 'dblclick', mode: 'row' }"
          style="width: 100%;margin-top:10px"
          @edit-closed="editBClosedEvent"
        >
          <vxe-table-column field="order_num" title="排序" width="80" :edit-render="{ name: '$input', props: { type: 'number' } }" />
          <vxe-table-column field="location" title="位置" :edit-render="{ name: '$select', options: locationList, optionProps: { value: 'value', label: 'label' } }" />
          <vxe-table-column field="type" title="类型" :edit-render="{ name: '$select', options: bTypeList, optionProps: { value: 'value', label: 'label' } }" />
          <vxe-table-column field="icon" title="图标" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="color" title="颜色" :edit-render="{ name: '$select', options: colorList, optionProps: { value: 'value', label: 'label' } }" />
          <vxe-table-column field="name" title="名字" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="tip" show-overflow width="120" title="提示信息" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="action" show-overflow width="150" title="action" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="dialog_title" show-overflow title="dialog标题" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="dialog_width" show-overflow title="dialog宽度" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="dialog_height" show-overflow title="dialog高度" :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
          <vxe-table-column field="dialog_src" show-overflow title="dialog地址" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="dialog_max" title="全屏">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.dialog_max" active-color="#13ce66" inactive-color="#ff4949" @change="switchButtonChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="dialog_maxmin" title="大小调整">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.dialog_maxmin" active-color="#13ce66" inactive-color="#ff4949" @change="switchButtonChange(scope.row)" />
            </template>
          </vxe-table-column>
          <!-- <vxe-table-column field="tab_name" show-overflow title="页签名称" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column
            field="son_data_object_no"
            show-overflow
            title="子元数据对象"
            :edit-render="{ name: '$select', options: objects, optionProps: { value: 'no', label: 'cn' } }"
          />
          <vxe-table-column field="parent_id_field" show-overflow title="主数据关联id" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="son_id_field" show-overflow title="子数据关联id" :edit-render="{ name: 'EditDownTextarea' }" /> -->
          <vxe-table-column field="auth_role" show-overflow width="140" title="角色标识权限集合" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="auth_row" show-overflow title="行内权限" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="permission_no" show-overflow title="权限编号" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="permission_name" show-overflow title="权限名称" :edit-render="{ name: 'EditDownTextarea' }" />
          <vxe-table-column field="is_show" title="是否显示">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.is_show" active-color="#13ce66" inactive-color="#ff4949" @change="switchButtonChange(scope.row)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="80">
            <template slot-scope="scope">
              <el-button size="small" type="danger" icon="el-icon-delete" @click="delButton(scope.row)" />
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-tab-pane>
    </el-tabs>
    <vxe-modal id="coder_fieldDialog" v-model="fieldDialogFormVisible" title="新建虚拟字段" width="600" show-footer show-zoom resize remember storage transfer>
      <template #default>
        <el-form :model="form" size="small">
          <el-form-item label="排序" :label-width="formLabelWidth"><el-input v-model="form.order_num" autocomplete="off" /></el-form-item>
          <el-form-item label="字段名" :label-width="formLabelWidth"><el-input v-model="form.en" autocomplete="off" /></el-form-item>
          <el-form-item label="中文名" :label-width="formLabelWidth"><el-input v-model="form.cn" autocomplete="off" /></el-form-item>
          <el-form-item label="配置来源" :label-width="formLabelWidth"><el-input v-model="form.fictitious_sql" type="textarea" autocomplete="off" /></el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="fieldDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fieldSubmit">确 定</el-button>
      </template>
    </vxe-modal>
    <vxe-modal id="coder_buttonDialog" v-model="buttonDialogFormVisible" title="添加按钮" width="600" show-footer show-zoom resize remember storage transfer>
      <template #default>
        <el-row :gutter="4">
          <el-form ref="buttonForm" :model="form" :rules="rules" size="small" label-width="100px">
            <el-col :span="12">
              <el-form-item label="排序" prop="order_num"><el-input v-model="form.order_num" placeholder="请输入排序" clearable :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="位置" prop="location">
                <el-select v-model="form.location" placeholder="请输入按钮位置" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in locationList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-select v-model="form.type" placeholder="请输入按钮类型" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in bTypeList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图标" prop="icon"><el-input v-model="form.icon" placeholder="请输入图标" clearable :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色" prop="color">
                <el-select v-model="form.color" placeholder="请输入按钮颜色" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in colorList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名字" prop="name"><el-input v-model="form.name" placeholder="请输入名字" clearable :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type != 3 && form.type != 4" label="按钮提示" prop="tip" :rules="[{ required: true, message: '请输入按钮提示', trigger: 'blur' }]">
                <el-input v-model="form.tip" placeholder="请输入按钮提示" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type != 3 && form.type != 4" label="action" prop="action" :rules="[{ required: true, message: '请输入后端方法', trigger: 'blur' }]">
                <el-input v-model="form.action" placeholder="请输入后端方法" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog标题" prop="dialog_title" :rules="[{ required: true, message: '请输入dialog标题', trigger: 'blur' }]">
                <el-input v-model="form.dialog_title" placeholder="请输入dialog标题" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog宽度" prop="dialog_width">
                <el-input v-model="form.dialog_width" placeholder="请输入dialog宽度" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog高度" prop="dialog_height">
                <el-input v-model="form.dialog_height" placeholder="请输入dialog高度" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog地址" prop="dialog_src" :rules="[{ required: true, message: '请输入dialog地址', trigger: 'blur' }]">
                <el-input v-model="form.dialog_src" placeholder="请输入dialog地址" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog全屏" prop="dialog_max">
                <el-switch v-model="form.dialog_max" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog大小调整" prop="dialog_maxmin">
                <el-switch v-model="form.dialog_maxmin" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item v-if="form.type == 4" label="页签名称" prop="tab_name" :rules="[{ required: true, message: '请输入页签名称', trigger: 'blur' }]">
                <el-input v-model="form.tab_name" placeholder="请输入页签名称" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 4" label="子数据模型" prop="son_data_object_no" :rules="[{ required: true, message: '请选择子数据模型', trigger: 'blur' }]">
                <el-select v-model="form.son_data_object_no" style="width: 100%;" filterable placeholder="请选择">
                  <el-option v-for="item in objects" :key="item.no" :label="item.cn" :value="item.no" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="form.type == 4"
                label="主数据ID"
                prop="parent_id_field"
                :label-width="formLabelWidth"
                :rules="[{ required: true, message: '请填写主数据ID', trigger: 'blur' }]"
              >
                <el-input v-model="form.parent_id_field" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="form.type == 4"
                label="子关联ID"
                prop="son_id_field"
                :label-width="formLabelWidth"
                :rules="[{ required: true, message: '请填写子关联ID', trigger: 'blur' }]"
              >
                <el-input v-model="form.son_id_field" />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="权限编号" prop="permission_no">
                <el-input v-model="form.permission_no" placeholder="请输入权限编号" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限名称" prop="permission_name">
                <el-input v-model="form.permission_name" placeholder="请输入权限名称" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色标识" prop="auth_role"><el-input v-model="form.auth_role" placeholder="请输入角色标识" clearable :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="行内权限" prop="auth_row"><el-input v-model="form.auth_row" placeholder="请输入行内权限" clearable :style="{ width: '100%' }" /></el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </template>
      <template #footer>
        <el-button @click="buttonDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="buttonSubmit">确定</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { getFieldsAndButtons, fieldChange,fieldSubmit, buttonNew_, buttonDel_, buttonChange,delField } from '@/api/coder/data.js';

export default {
  name:'fieldAndButton',
  props: ['tableHeight','objects','data_object_no'],
  data() {
    return {
      fields: [],
      buttons: [],
      add:false,
      activeName: 'field',
      buttonDialogFormVisible: false,
      fieldDialogFormVisible: false,
      formLabelWidth: '110px',
      form: {},
      typeList: [
        { value: 'input', label: '输入框' },
        { value: 'select', label: '选择框' },
        { value: 'selector', label: '弹窗选择器' },
        { value: 'radio', label: '单选按钮' },
        { value: 'switch', label: '开关' },
        { value: 'date', label: '日期' },
        { value: 'datetime', label: '日期时间' },
        { value: 'user', label: '用户选择' },
        { value: 'file', label: '附件' }
      ],
      alignList: [{ value: 'left', label: '居左' }, { value: 'center', label: '居中' }, { value: 'right', label: '居右' }],
      locationList: [{ value: 1, label: '头部' }, { value: 2, label: '行内' }],
      bTypeList: [{ value: 1, label: 'confirm' }, { value: 2, label: 'combobox' }, { value: 3, label: 'dialog' }],
      colorList: [
        { value: 'null', label: '默认按钮' },
        { value: 'primary', label: '主要按钮' },
        { value: 'success', label: '成功按钮' },
        { value: 'info', label: '信息按钮' },
        { value: 'warning', label: '警告按钮' },
        { value: 'danger', label: '危险按钮' }
      ],
      rules: {
        order_num: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ],
        location: [
          {
            required: true,
            message: '请输入按钮位置',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入按钮类型',
            trigger: 'change'
          }
        ],
        icon: [],
        color: [
          {
            required: true,
            message: '请输入按钮颜色',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名字',
            trigger: 'blur'
          }
        ],
        tip: [
          {
            required: true,
            message: '请输入按钮提示',
            trigger: 'blur'
          }
        ],
        permission_no: [
          {
            required: true,
            message: '请输入权限编号',
            trigger: 'blur'
          }
        ],
        permission_name: [
          {
            required: true,
            message: '请输入权限名称',
            trigger: 'blur'
          }
        ],
        auth_role: [],
        auth_row: [],
        temp_data_object_no:this.data_object_no
      }
    };
  },
  created() {
    this.getData(this.data_object_no)
  },
  methods: {
    getData(no) {
      getFieldsAndButtons(no).then(res => {
        this.temp_data_object_no = no;
        this.fields = res.fields;
        this.buttons = res.buttons;
        this.add = true;
      });
    },
    addFieldInit: function() {
      if (this.temp_data_object_no === '') {
        this.$message.error('请先选择元数据模型');
      } else {
        this.form = {};
        this.fieldDialogFormVisible = true;
      }
    },
    fieldSubmit: function() {
      this.form.data_object_no = this.temp_data_object_no;
      fieldSubmit(this.form).then(res => {
        this.fieldDialogFormVisible = false;
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.fields.push(res.row);
      });
    },
    // change
    switchFieldChange(row) {
      fieldChange(row).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        });
      });
    },
    delField: function(row) {
      this.$confirm('确认是否要删除此字段？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delField(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.$refs.fieldTable.remove(row);
        });
      });
    },
    // change
    switchButtonChange(row) {
      buttonChange(row).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        });
      });
    },
    editClosedEvent({ row, column }, event) {
      fieldChange(row).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        });
      });
    },
    addButtonInit: function() {
      if (this.temp_data_object_no === '') {
        this.$message.error('请先选择元数据模型');
      } else {
        this.form = { color: '' };
        this.buttonDialogFormVisible = true;
      }
    },
    buttonSubmit: function() {
      this.$refs['buttonForm'].validate(valid => {
        if (!valid) return;
        this.form.data_object_no = this.temp_data_object_no;
        buttonNew_(this.form).then(res => {
          this.buttonDialogFormVisible = false;
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.buttons.push(res.row);
        });
      });
    },
    editBClosedEvent({ row, column }, event) {
      buttonChange(row).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        });
      });
    },
    delButton: function(row) {
      this.$confirm('确认是否要删除此按钮？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        buttonDel_(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.$refs.buttonTable.remove(row);
        });
      });
    },
    rowStyle({ row, rowIndex }) {
      if (row.is_fictitious) {
        return {
          backgroundColor: '#F2DC85'
        };
      }
    }
  }
};
</script>
